<template>
    <div>我的工资 {{ money }}</div>
    <button @click="money += 1000">点我加工资</button>
    <div>次数{{ count }}</div>
    <button @click="count += 1">点我加次数</button>

    <!-- obj的数据 -->
    <div>obj{{ obj }}</div>
    <div>年龄{{ obj.age }}</div>
    <button @click="obj.age += 1">点我加次数</button>
</template>

<script setup>
import { ref, watch } from 'vue';

const money = ref(10000)
const count = ref(0)
const obj = ref({
    name: 'zs',
    age: 18
})

// 写法1，最常见，必须掌握
// watch(money, (value, oldValue) => {
//     console.log('改变后的工资', value);
//     console.log('改变前的工资', oldValue);
// })

// 写法2，监听多个数据源，不常见，了解即可
// watch([money, count], (value, oldValue) => {
//     console.log('多数据改变后的值', value);
//     console.log('多数据改变前的值', oldValue);
// })

// 写法3，比较常见，深度监听对象
// 可以传递第三个参数，配置项{deep：true}
// 对象在浏览器中，其实存放的是一个内存地址，改属性时，其实没有改变过对象的内存地址
// watch(obj, (value, oldValue) => {
//     console.log('改变后的obj', value);
//     console.log('改变前的obj', oldValue);
// }, { deep: true })

// 4.监听对象的某个属性(了解即可)
// 写法注意： 直接写 obj.value.age，等于只是取值，watch不能建立依赖
// 我们需要的是告诉watch，帮我监听 obj.value.age 的属性 ---->  () => obj.value.age
watch(
    () => obj.value.age,
    (val, oldVal) => {
        console.log('现在的数据', val);
        console.log('原来的数据', oldVal);
    }
)




</script>